<!-- 空白页组件 -->
<template>
  <view
    class="aster-empty-container tac"
    :class="eStyle == 'round' ? 'padding-sm' : ''"
    :style="{ height: height }"
  >
    <view
      class="aster-empty h-full dflex-c dflex-flow-c"
      :class="eStyle == 'round' ? 'round border-radius bg-main' : ''"
    >
      <image v-if="imgurl" :src="imgurl" />
      <view v-if="tip" class="title padding-sm">{{ tip }}</view>
      <button class="border-radius aster-btn" @click="to">{{ btnTip }}</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, watchEffect } from 'vue';
  import config from '@/utils/config';

  const props = defineProps({
    eStyle: {
      type: String,
      default: 'square',
    },
    eType: {
      type: String,
      default: 'other',
    },
    tip: {
      type: String,
      default: '暂无数据',
    },
    btnTip: {
      type: String,
      default: '去逛逛',
    },
    btnGoto: {
      type: String,
      default: config.route.home,
    },
    auto: {
      type: Boolean,
      default: !0,
    },
    height: {
      type: String,
      default: '100vh',
    },
  });

  const emits = defineEmits(['goto']);

  const imgurl_dft = ref('../../static/images/empty/empty.jpg');
  const imgurl = ref('');
  const imgs = ref([
    { type: 'cart', url: '../../static/images/empty/cart.jpg' },
    { type: 'search', url: '../../static/images/empty/search.jpg' },
    { type: 'other', url: '../../static/images/empty/empty.jpg' },
  ]);

  watchEffect(() => {
    let imgobj = imgs.value.find((x) => x.type == props.eType);
    imgurl.value = imgobj ? imgobj.url : imgurl_dft.value;
  });

  const to = () => {
    emits('goto', {
      type: 'goto',
    });

    if (props.auto) {
      // 跳转指定页
      uni.switchTab({
        url: props.btnGoto,
      });
    }
  };
</script>

<style scoped lang="scss">
  .aster-empty-container {
    .aster-empty {
      .round {
        padding: 25% 50rpx;

        button {
          width: 220rpx;
        }
      }
      image {
        width: 160rpx;
        height: 160rpx;
      }

      .title {
        color: #c0c0c0;
      }

      .aster-btn {
        font-size: 30upx;
        color: #fff;
        background-color: #ff6a6c;
        display: inline-block;
      }
    }
  }
</style>
